<template>
  <div class="result-display">
    <h3>处理结果</h3>
    
    <div v-if="results.success" class="success-message">
      {{ results.message }}
    </div>
    <div v-else class="error-message">
      处理失败: {{ results.message }}
    </div>
    
    <!-- 处理成功的视频列表 -->
    <div v-if="results.data?.processed_videos?.length" class="results-section">
      <h4>已处理视频 ({{ results.data.processed_videos.length }})</h4>
      
      <div class="video-grid">
        <video-card
          v-for="(video, index) in results.data.processed_videos"
          :key="index"
          :video-url="getVideoUrl(video.output_path)"
          :video-title="video.original"
          :stats="getVideoStats(video)"
          :duration="videoDurations[video.output_path] ? formatDuration(videoDurations[video.output_path]) : ''"
          :downloadable="true"
          @metadata="metadata => handleVideoMetadata(metadata, video.output_path)"
        />
      </div>
    </div>
    
    <!-- 处理失败的视频列表 -->
    <div v-if="results.data?.failed_videos?.length" class="failed-section">
      <h4>处理失败的视频 ({{ results.data.failed_videos.length }})</h4>
      <ul class="failed-list">
        <li v-for="(video, index) in results.data.failed_videos" :key="index">
          {{ video.original }} - {{ video.message }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref } from 'vue';
import VideoCard from '@/components/VideoCard.vue';
import { genOutsideVideoURL } from '@/utils/videoHelper';

const props = defineProps({
  results: Object
});

const videoDurations = ref({});

// 处理视频元数据
function handleVideoMetadata(metadata, videoPath) {
  if (metadata && metadata.duration) {
    videoDurations.value[videoPath] = metadata.duration;
  }
}

// 获取视频统计信息
function getVideoStats(video) {
  if (!video.video_info) return '';
  return `${video.video_info.width}x${video.video_info.height} | ${formatDuration(video.video_info.duration)}`;
}

// 格式化时长
function formatDuration(seconds) {
  if (!seconds || isNaN(seconds)) return '';
  const mins = Math.floor(seconds / 60);
  const secs = Math.round(seconds % 60);
  return `${mins}:${secs.toString().padStart(2, '0')}`;
}

// 获取视频URL
function getVideoUrl(path) {
  if (!path) return '#';
  return genOutsideVideoURL(path);
}

</script>

<style scoped>
.result-display {
  margin-top: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 6px;
}

.success-message {
  padding: 10px 15px;
  background: #f0f9eb;
  color: #67c23a;
  border-left: 4px solid #67c23a;
  margin-bottom: 20px;
}

.error-message {
  padding: 10px 15px;
  background: #fef0f0;
  color: #f56c6c;
  border-left: 4px solid #f56c6c;
  margin-bottom: 20px;
}

.results-section, .failed-section {
  margin-top: 20px;
}

/* 网格布局 - 使用CSS Grid */
.video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

/* 响应式布局 */
@media (max-width: 1400px) {
  .video-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1100px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 800px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .video-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

.failed-list {
  list-style-type: none;
  padding-left: 0;
}

.failed-list li {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.failed-list li:last-child {
  border-bottom: none;
}
</style>